<!--
 * @Description: 文档页面
 * @Author bianpengfei
 * @create 2022/1/13 09:19
 -->
<script setup>
import { onMounted, onUnmounted, reactive, getCurrentInstance } from 'vue'
import DemoMd from './demo.md'

defineProps({
  description: {
    type: String,
    default: '暂无数据'
  }
})
defineEmits({})
const state = reactive({})
const { proxy } = getCurrentInstance()
onMounted(() => {})

onUnmounted(() => {})
</script>

<!--render-->
<template>
  <div>
    <van-nav-bar title="公共业务组件" />
    <g-scroll-view-simple height="calc(100vh - 0.88rem)">
      <div class="my-12 bg-white px-10">
        <g-title type="warning" dark class="my-12">
          注：业务型组件放在项目 src/components/business 目录，在组件上前缀有g-开头，表示全局性组件，这边只做了在
          src/components/base 和 src/components/business 下自动注册了全局组件, 注册全局逻辑封装在了
          src/libs/plugins/global-components.js
        </g-title>
      </div>
      <div class="px-10" ref="container">
        <demo-md></demo-md>
      </div>
    </g-scroll-view-simple>
  </div>
</template>

<!--style-->
<style scoped lang="less">
:deep(.van-row) {
  &.vuedoc {
    & > .van-col {
      background: #f7f7f7;
      width: calc((100% - 0.4rem) / 3);
      flex: 1;
      max-width: calc((100% - 0.4rem) / 3);
      margin-right: 0.16rem;
      margin-bottom: 0.16rem;
      border-radius: 0.08rem;
      border: 1px solid rgba(0, 0, 0, 0.06); // #ebeef5
      transition: 0.3s all;
      &:nth-child(3n) {
        margin-right: 0;
      }
      &:hover {
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.16);
      }
    }
  }
}
</style>
